<script setup lang="ts">
import useAppState from "~/hooks/useAppState";
import list from "./config";

const { params } = useRoute();
const data = list.find((e) => e.id == params.id);

const appState = useAppState();
appState.value.fillAppHeader = true;
</script>
<template>
  <template v-if="data">
    <div class="relative mb-10 hidden md:block">
      <img src="/assets/images/news-bg.png" class="w-full" />

      <div
        class="absolute top-50% left-50% w-full max-w-1200px -translate-x-50% -translate-y-50%"
      >
        <span class="text-[38px]">品牌新闻</span>
      </div>
    </div>

    <div class="flex items-start max-w-1200px my-5 mx-auto">
      <div class="flex-auto px-4 md:p-0">
        <div class="flex items-center text-xs">
          <span class="text-#666">品牌新闻</span>
          <Icon name="ArrowRight" class="text-[8px]! mx-2" />
          <span>详情</span>
        </div>

        <section class="mt-8">
          <h1 class="font-bold text-[28px]">{{ data.title }}</h1>
          <date class="text-#666 text-xs">{{ data.date }}</date>

          <article class="mt-4" v-html="data.content" />
        </section>
      </div>

      <section
        class="ml-8 bg-[#FAFAFA] rounded p-3 w-295px flex-none hidden md:block"
      >
        <div class="mb-2">其他信息</div>

        <ol class="list-disc list-inside">
          <template v-for="item in list" :key="item.id">
            <li class="flex items-center mt-2" v-if="item.id !== data.id">
              <i class="flex-none w-1.5 h-1.5 bg-gray-600 rounded-full mr-3" />

              <a
                class="flex-auto min-w-0 hover:text-#7948ea"
                :href="`/news/${item.id}`"
              >
                <p class="truncate">
                  {{ item.title }}
                </p>
                <p class="text-xs text-#666">{{ item.date }}</p>
              </a>
            </li>
          </template>
        </ol>
      </section>
    </div>
  </template>
</template>
